<template>
  <div class="app-container">
    <el-form ref="postForm" :rules="formRules" :model="formData" label-width="120px">
      <el-form-item label="活动名称" prop="title">
        <el-col :span="6">
          <el-input v-model="formData.title" />
        </el-col>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-col :span="6">
          <el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(value,key) in optionData.statusOptions" :label="value.label" :value="value.key" :key="key">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="6">
          <el-form-item prop="start_time">
            <el-date-picker v-model="formData.start_time" type="datetime" placeholder="开始时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="1" class="line">-</el-col>
        <el-col :span="6">
          <el-form-item prop="end_time">
            <el-date-picker v-model="formData.end_time" type="datetime" placeholder="结束时间" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="是否收费" prop="comment_disabled">
        <el-switch v-model="formData.comment_disabled" />
      </el-form-item>
      <el-form-item label="活动类型" prop="act_type">
        <el-checkbox-group v-model="formData.act_type">
          <el-checkbox v-for="(value,key) in optionData.calendarTypeOptions" :label="value.key" :key="key">
            {{ value.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="资源" prop="resource">
        <el-radio-group v-model="formData.resource">
          <el-radio label="a">线上品牌商赞助</el-radio>
          <el-radio label="b">线下场地免费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动图片" prop="image_uri" style="margin-bottom: 30px;">
        <el-upload :action="action" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" class="avatar-uploader">
          <img v-if="formData.image_uri" :src="formData.image_uri" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动描述" prop="content_short">
        <el-input v-model="formData.content_short" type="textarea" />
      </el-form-item>
      <el-form-item label="活动详情" prop="content" style="margin-bottom: 100px;">
        <app-editor v-model="formData.content" :upload-action="action" upload-name="image" width="100%"></app-editor>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="submitForm">创建</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- <div>
      <el-button type="primary" @click="submitForm">创建</el-button>
      <el-button @click="onCancel">取消</el-button>
    </div> -->
  </div>
</template>

<script>
import AppEditor from '@/components/AppEditor';
import { getArticleDetail, createArticle, updateArticle } from '@/api/table/index';

export default {
  name: 'ArticleDetail',
  components: {
    AppEditor
  },
  // 配合路由配置的props属性实现在组件中通过props获取参数
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      action: 'https://jsonplaceholder.typicode.com/posts/',
      // action: uploadUrl, // 需替换实际上传图片接口
      formData: {
        title: '',
        status: '',
        start_time: '',
        end_time: '',
        comment_disabled: '',
        act_type: ['CN'],
        resource: '',
        image_uri: '',
        content_short: '',
        content: ''
      },
      // 选择框的数据
      optionData: {
        calendarTypeOptions: [
          { label: '全部', key: '' },
          { label: '中国', key: 'CN' },
          { label: '美国', key: 'US' },
          { label: '日本', key: 'JP' }
        ],
        statusOptions: [
          { label: '已发布', key: 'published' },
          { label: '草稿', key: 'draft' },
          { label: '已删除', key: 'deleted' }
        ],
      },
      // 校验规则
      formRules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 150, message: '长度在 1 到 150 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择活动状态', trigger: 'change' }
        ],
        start_time: [
          { required: true, message: '开始时间', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '结束时间', trigger: 'change' }
        ],
        act_type: [
          { type: 'array', required: true, message: '请至少选择一个活动类型', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        content_short: [
          { required: true, message: '请填写活动描述', trigger: 'blur' }
        ]
      },
      loading: false,
    };
  },
  created () {
    this.fetchData();
  },
  methods: {
    // 获取详情
    fetchData () {
      console.log(this.$props.id);
      const id = this.$props.id;
      if (id) {
        // 此处为了正常获取，写死了输入的订单id
        this.$http(getArticleDetail('20190827130311309008598'), res => {
          const data = res.d.data;
          this.formData = data;
        });
      }
    },
    // 提交表单
    submitForm () {
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          // 修改
          if (this.isEdit) {
            this.loading = true;
            this.$http(updateArticle(this.formData), res => {
              this.loading = false;
              this.$message({
                message: '成功',
                type: 'success'
              });
              this.$router.go(-1);
            });
          } else {
            // 新增
            this.loading = true;
            this.$http(createArticle(this.formData), res => {
              this.loading = false;
              this.$message({
                message: '成功',
                type: 'success'
              });
              this.$router.go(-1);
            });
          }
        } else {
          return false;
        }
      });
    },
    // 取消
    onCancel () {
      this.$message({
        message: '已取消!',
        type: 'warning'
      });
      this.$router.go(-1);
    },
    // 图片上传
    handleAvatarSuccess (res, file) {
      this.form.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/styles/mixin.scss';
.line {
  text-align: center;
}
</style>
